<div class="col-md-12" ng-controller="DataCentersOverviewController">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-2">
              <form class="form-horizontal dc-db-selection">
                <div class="form-group">
                  <label class="control-label col-md-4">
                    <b>Database</b>
                  </label>
                  <div class="col-md-8">
                    <select class="form-control" ng-model="selectedDb" ng-options="key as key for (key,v) in databases">
                    </select>
                  </div>
                </div>
              </form>
            </div>

            <div class="col-md-10 studio-well-tips">
              <div class="row" ng-hide="dcEnabled">
                <div class="col-md-12">
                  <h4>Data Centers not available for db {{selectedDb}}</h4>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3" ng-show="dcEnabled">
                  <h4>Data Centers <span class="label label-default">{{dcCount}}</span></h4>
                </div>
                <div class="col-md-3" ng-show="dcEnabled">
                  <h4>Online Servers <span class="label label-success">{{onLineServers}}</span></h4>
                </div>
                <div class="col-md-3" ng-show="dcEnabled">
                  <h4>Synchronizing Servers <span class="label label-warning">{{syncServers}}</span></h4>
                </div>
                <div class="col-md-3" ng-show="dcEnabled">
                  <h4>Offline Servers <span class="label label-danger">{{offLineServers}}</span></h4>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" ng-show="dcEnabled">
            <div class="col-md-3" ng-repeat="dc in dataCenters">
              <div id="{{'dc-donut-' + dc.name}}" c3-data-center dc="dc"></di]v>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>
</div>
